<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>天气预报</title>
    <script src="./js/jquery.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/tianqi.css">

    <script>

        function test() {
            $.ajax({
                url: 'https://api.heweather.com/x3/weather',
                type: "get",
                data: {
                    city: "绵阳",
                    key: "b67f96394f074c8ca677829ed297cd73"
                },
                dataType: 'json',
                success: function (res) {

                    try {
                        $("#tmp").text(res["HeWeather data service 3.0"][0].daily_forecast[0].tmp.max);
                        $("#tmpp").text(res["HeWeather data service 3.0"][0].daily_forecast[0].tmp.min);
                        $("#data").text(res["HeWeather data service 3.0"][0].daily_forecast[0].date);
                        $("#tianqi").text(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n);

                        $("#data1").text(res["HeWeather data service 3.0"][0].daily_forecast[1].date);
                        $("#tmp1").text(res["HeWeather data service 3.0"][0].daily_forecast[1].tmp.max);
                        $("#tmp11").text(res["HeWeather data service 3.0"][0].daily_forecast[1].tmp.min);
                        $("#tianqi1").text(res["HeWeather data service 3.0"][0].daily_forecast[1].cond.txt_n);

                        $("#data2").text(res["HeWeather data service 3.0"][0].daily_forecast[2].date);
                        $("#tmp2").text(res["HeWeather data service 3.0"][0].daily_forecast[2].tmp.max);
                        $("#tmp22").text(res["HeWeather data service 3.0"][0].daily_forecast[2].tmp.min);
                        $("#tianqi2").text(res["HeWeather data service 3.0"][0].daily_forecast[2].cond.txt_n);

                        $("#data3").text(res["HeWeather data service 3.0"][0].daily_forecast[3].date);
                        $("#tmp3").text(res["HeWeather data service 3.0"][0].daily_forecast[3].tmp.max);
                        $("#tmp33").text(res["HeWeather data service 3.0"][0].daily_forecast[3].tmp.min);
                        $("#tianqi3").text(res["HeWeather data service 3.0"][0].daily_forecast[3].cond.txt_n);

                        $("#data4").text(res["HeWeather data service 3.0"][0].daily_forecast[4].date);
                        $("#tmp4").text(res["HeWeather data service 3.0"][0].daily_forecast[4].tmp.max);
                        $("#tmp44").text(res["HeWeather data service 3.0"][0].daily_forecast[4].tmp.min);
                        $("#tianqi4").text(res["HeWeather data service 3.0"][0].daily_forecast[4].cond.txt_n);

                        $("#data5").text(res["HeWeather data service 3.0"][0].daily_forecast[5].date);
                        $("#tmp5").text(res["HeWeather data service 3.0"][0].daily_forecast[5].tmp.max);
                        $("#tmp55").text(res["HeWeather data service 3.0"][0].daily_forecast[5].tmp.min);
                        $("#tianqi5").text(res["HeWeather data service 3.0"][0].daily_forecast[5].cond.txt_n);

                        $("#data6").text(res["HeWeather data service 3.0"][0].daily_forecast[6].date);
                        $("#tmp6").text(res["HeWeather data service 3.0"][0].daily_forecast[6].tmp.max);
                        $("#tmp66").text(res["HeWeather data service 3.0"][0].daily_forecast[6].tmp.min);
                        $("#tianqi6").text(res["HeWeather data service 3.0"][0].daily_forecast[6].cond.txt_n);

                        if(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="晴"){
                            $("#img").attr("src","./img/1.png")
                        }
                        else if(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="多云"){
                            $("#img").attr("src","./img/2.png")
                        }
                        else if(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="阴"){
                            $("#img").attr("src","./img/2.png")
                        }
                        else if(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="小雨"){
                            $("#img").attr("src","./img/4.png")
                        }
                        else if(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="多雨"){
                            $("#img").attr("src","./img/5.png")
                        }

                    }
                    catch (err) {
                        setTimeout(function () {
                            test()

                        }, 300)
                        console.log(err.message + "正在重新加载")
                    }
                }
            })
        }
        test();
        function changeClock()
        {
            var d = new Date();
            document.getElementById("clock").innerHTML =d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
        }
        window.setInterval(changeClock, 1000);
    </script>


</head>
<body>
    <div class="container today">
        <h3>绵阳</h3>
        <div id="clock" style="font-size: 25px;float: right;margin-top: -13%">
            --:--:--
        </div>
        <hr style="height: 1px;border-top:1px solid rgba(146, 147, 152, 0.89);"/>
        <h4 id="data" style="margin-top: -7px;margin-bottom: -7px;">日期</h4>
        <b id="tianqi" style="font-size: 20px;float: right;margin-right: 5px;margin-top: -5%;">天气</b>
        <hr style="height: 1px;border-top:1px solid rgba(146, 147, 152, 0.89); "/>
        <img id="img" alt=""/> <h2  style="float: right;margin-right: 5px;">
        <b id="tmp">大</b>℃~<b id="tmpp">小</b>℃</h2>
    </div>

    <div class="row" style="font-size: 20px;">
        <div class="col-md-6 container" >
            <div class="qi1 container" >
                <div  id="data1" style="float: left;margin-top: 10%;">日期</div>
                <div style="float: right;margin-top: 10%;padding-left: 10%;">
                    <b id="tianqi1">天气</b>
                </div>
                <div style="float: right;margin-top: 10%;">
                    <b id="tmp1">大</b>℃~<b id="tmp11">小</b>℃
                </div>
            </div>
            <div class="qi1 container">
                <div id="data2"  style="float: left;margin-top: 10%;">日期</div>

                <div style="float: right;margin-top: 10%;padding-left: 10%;">
                    <b id="tianqi2">天气</b>
                </div>
                <div style="float: right;margin-top: 10%;">
                    <b id="tmp2">大</b>℃~<b id="tmp22">小</b>℃
                </div >

            </div>
            <div class="qi1 container">
                <div id="data3" style="float: left;margin-top: 10%;">日期</div>
                <div style="float: right;margin-top: 10%;padding-left: 10%;">
                    <b id="tianqi3">天气</b>
                </div>
                <div style="float: right;margin-top: 10%;">
                    <b id="tmp3">大</b>℃~<b id="tmp33">小</b>℃
                </div >

            </div>
        </div>
        <div class="col-md-6 container" >
            <div class="qi2 container">
                <div id="data4" style="float: left;margin-top: 10%;">日期</div>
                <div style="float: right;margin-top: 10%;padding-left: 10%;">
                    <b id="tianqi4">天气</b>
                </div>
                <div style="float: right;margin-top: 10%;">
                    <b id="tmp4">大</b>℃~<b id="tmp44">小</b>℃
                </div >

            </div>
            <div class="qi2 container">
                <div id="data5" style="float: left;margin-top: 10%;">日期</div>
                <div style="float: right;margin-top: 10%;padding-left: 10%;">
                    <b id="tianqi5">天气</b>
                </div>
                <div style="float: right;margin-top: 10%;">
                    <b id="tmp5">大</b>℃~<b id="tmp55">小</b>℃
                </div >

            </div>
            <div class="qi2 container">
                <div id="data6" style="float: left;margin-top: 10%;">日期</div>
                <div style="float: right;margin-top: 10%;padding-left: 10%;">
                    <b id="tianqi6">天气</b>
                </div>
                <div style="float: right;margin-top: 10%;">
                    <b id="tmp6">大</b>℃~<b id="tmp66">小</b>℃
                </div >
            </div>
        </div>
    </div>
</body>

</html>
